<template>
  <el-dialog :visible="isVisible"
             :title="title"
             :close-on-click-modal="false"
             append-to-body
             width="620px"
             top="20vh"
             @close="close">
    <div class="renderSty">
      <div v-html="render"></div>
      <div class="cSty">南软科技</div>
      <div class="timeSty">{{date}}</div>
    </div>
    <div class="bottom-btn">
      <div :class="flag ?'ml170':'ml210'">
        <el-button v-if="unReadNoticeList.length > 1 && index !== 0"
                   plain
                   type="primary"
                   @click="previous">上一条</el-button>
        <el-button v-if="unReadNoticeList.length > 1 && (index+ 1 !== unReadNoticeList.length)"
                   type="primary"
                   @click="next">下一条</el-button>
      </div>
      <el-checkbox v-model="checked"
                   @change="handleChangeChecked">不再提醒</el-checkbox>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import { user } from "@/api/index";
export default {
  name: "NoticeDiolog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checked: false,
      index: 0,
      isVisible: false
    };
  },
  computed: {
    ...mapState({
      unReadNoticeList: (state) => state.login.unReadNotice
    }),
    title () {
      return this.unReadNoticeList[this.index]?.title
    },
    render () {
      return this.unReadNoticeList[this.index]?.content
    },
    flag () {
      return this.unReadNoticeList.length > 1 && this.index !== 0 && this.index + 1 !== this.unReadNoticeList.length
    },
    date () {
      let day = this.unReadNoticeList[this.index]?.createAt;
      return this.$moment(day).format("YYYY年MM月DD日")
    },
    notificationIds () {
      return this.unReadNoticeList
        .map((item) => {
          return item.notificationId;
        });
    }
  },
  created () {
    this.isVisible = this.visible;
  },
  methods: {
    previous () {
      if (this.index) {
        this.index -= 1;
      }
    },
    next () {
      if (this.index < this.unReadNoticeList.length) {
        this.index += 1;
      }
    },
    async handleChangeChecked (val) {
      console.log("handleChangeChecked", val)
      let { code } = await user.changeNoticeRead({ readStatus: val, notificationIds: this.notificationIds });
      if (code === 0) {
        console.log("====>", code)
      }
    },
    close () {
      this.isVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 15px 20px !important;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
::v-deep .el-dialog {
  border-radius: 10px !important;
}
.renderSty {
  line-height: 32px !important;
  padding: 0 38px;
  height: 290px;
  overflow-y: auto;
}
.cSty {
  display: flex;
  justify-content: flex-end;
  padding-right: 80px;
}
.timeSty {
  display: flex;
  justify-content: flex-end;
  padding-right: 60px;
}
.bottom-btn {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 38px;
  margin-top: 10px;
}
.ml170 {
  margin-left: 170px;
}
.ml210 {
  margin-left: 210px;
}
</style>
